import React from 'react'
import UrlPattern from 'url-pattern'
import { connect } from 'react-redux'
import { Col, Row, Icon } from 'antd'
import { TwsBelongTask } from 'tws-antd'

import { studentAssignmentPageBodyUrl } from '../constant/constant-url'
import ReferenceButtonGroup from './assignment/reference-button-group'
import EditStatusBox from './assignment/edit-status-box'
import CommentBox from './assignment/comment-box'
import OnlineCodingQuiz from './assignment/online-coding-quiz'
import * as actions from '../actions/online-coding'
import { studentGetSectionComments } from '../actions/comment'
import { getReviewOnlineCodingQuiz, submitSupplementary } from '../actions/reviewQuiz'
import LeftMenu from './assignment/left-menu'
import AssignmentSupplementaryBox from './assignment/assignment-supplementary-box'

class OnlineCodingDetailPageBody extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      programId: 0,
      taskId: 0,
      assignmentId: 0,
      quizId: 0
    }
  }

  componentDidMount() {
    const { history, location } = this.props
    const { assignmentId, taskId, quizId } = this.props.match.params
    history.listen(this.update.bind(this))
    this.update(location)
    this.props.getRunningLogs(taskId, assignmentId, quizId, 0)
    this.props.getOnlineCodingQuizzes(assignmentId)
    this.props.getTask(taskId)
  }

  update(location) {
    const pattern = new UrlPattern(studentAssignmentPageBodyUrl)
    const urlParams = pattern.match(location.pathname) || {}
    const { taskId, programId, assignmentId, quizId } = urlParams

    this.setState({
      taskId,
      programId,
      assignmentId,
      quizId
    })
    if (quizId) {
      this.props.getReviewQuiz(assignmentId, quizId)
      this.props.getComments(assignmentId, quizId)
    }
  }

  handleClick(e) {
    const { taskId, programId, assignmentId } = this.state

    this.setState({
      quizId: parseInt(e.key)
    })
    this.props.history.push(`/student/program/${programId}/task/${taskId}/assignment/${assignmentId}/quiz/${parseInt(e.key)}`)
  }

  render() {
    const { taskId, programId, assignmentId, quizId } = this.state
    const { review, quizzes, task, suggestions, settings } = this.props
    const { studentWebUrl } = settings
    const quiz = quizzes.find(quiz1 => quiz1.id === parseInt(quizId)) || {}
    const assignment = task.assignments.find(assignment => assignment.id === parseInt(assignmentId)) || {}
    const runningLogs = this.props.runningLogs

    return <div>
      <div className='bottom-line padding-b-2'>
        <Row gutter={4}>
          <Col span={5} offset={1}>
            <h1>{assignment.title || ''}</h1>
          </Col>
        </Row>
      </div>
      <Row className='margin-t-2'>
        <Col span={3}>
          <LeftMenu quizzes={quizzes} quizId={quizId} handleClick={this.handleClick.bind(this)} />
        </Col>
        <Col offset={1} span={20}>
          <div className='bottom-line padding-b-2'>
            <Row gutter={4}>
              <Col span={5}>
                <h2>{quiz.onlineCodingName}</h2>
              </Col>
              <Col span={4} />
              <Col span={6}>
                {programId
                  ? <ReferenceButtonGroup
                    review={review}
                    programId={programId}
                    quizId={quiz.id}
                    taskId={taskId}
                    assignmentId={assignmentId}
                    quizDefinition={quiz} />
                  : ''
                }
              </Col>
              <EditStatusBox
                disable
                review={review}
                updateReviewQuiz={this.props.updateReviewQuiz}
                assignmentId={assignmentId}
                quizId={quiz.id} />
            </Row>
          </div>
          {
            quiz.id
              ? <OnlineCodingQuiz
                finished
                runningLogs={runningLogs}
                quiz={quiz}
                taskId={taskId}
                assignmentId={assignmentId}
                submitAnswer={this.props.submitAnswer}
                getRunningLogs={this.props.getRunningLogs} />
              : ''
          }
          <TwsBelongTask title={'所属任务卡'}>
            <a href={studentWebUrl + '/student/program/' + this.state.programId + '/task/' + this.state.taskId}>
              <Icon type='arrow-left' />{task.title}
            </a>
          </TwsBelongTask>
          {review.id
            ? <AssignmentSupplementaryBox
              submitSupplementary={this.props.submitSupplementary}
              reviewQuizId={review.id}
              assignmentId={this.state.assignmentId}
              supplement={review.supplement} /> : ''}
          <CommentBox
            user={this.props.user}
            studentId={this.props.user.id}
            suggestions={suggestions}
            quizId={this.state.quizId}
            assignmentId={this.state.assignmentId}
          />
        </Col>
      </Row>
    </div>
  }
}

const mapStateToProps = ({ user, settings, onlineCodingQuizzes, review, comments, task, runningLogs }) => {
  return {
    user,
    settings,
    review,
    quizzes: onlineCodingQuizzes,
    task,
    suggestions: comments,
    runningLogs
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getOnlineCodingQuizzes: (assignmentId, studentId) => dispatch(actions.getOnlineCodingQuizzes(assignmentId, studentId)),
    getReviewQuiz: (assignmentId, quizId) => dispatch(getReviewOnlineCodingQuiz(assignmentId, quizId)),
    getComments: (assignmentId, quizId) => dispatch(studentGetSectionComments(assignmentId, quizId)),
    getTask: (taskId) => dispatch(actions.getTask(taskId)),
    submitAnswer: (data, loadLogs) => dispatch(actions.submitAnswer(data, loadLogs)),
    getRunningLogs: (taskId, assignmentId, quizId, submissionId, getResult) => dispatch(actions.getRunningLogs(taskId, assignmentId, quizId, submissionId, getResult)),
    submitSupplementary: (id, supplement) => dispatch(submitSupplementary(id, supplement))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(OnlineCodingDetailPageBody)
